<template>
	<view class="content">
		<view class="top _df _ac _jb">
			<image class="img1" @click="back" src="@/static/img/index/hxIcon5.png" mode=""></image>
			<view class="title _df _jc _ac">
				{{topTitle}}
			</view>
			<view class="">
				
			</view>
			<!-- <image class="img2" src="@/static/img/index/hxShare.png" mode=""></image> -->
		</view>
		<view class="yuan-box">
			<view class="yuan1 _df _jc _ac" :class="[startClass,timeClass]"  v-if="!isCountdown">
				
			</view>
			<view class="yuan2" :class="[startClass,timeClass]"  v-if="!isCountdown">
				
			</view>
			<view class="count-down" :class="countClass" v-if="isCountdown">
				{{countDownNum}}
			</view>
			<view class="yuan-text-box" v-if="isStart">
				<view class="yuanText">
					{{yuanText}}
				</view>
				<view class="yuanCount">
					<!-- {{yuanCount}}秒 -->
					<u-count-down 
						ref="uCountDown" 
						:timestamp="timestamp" 
						:show-days="false"
						:show-hours="false" 
						bg-color="none"
						color="#000"
						font-size="40"
						@end="countEnd"
						@change="countChange"
						:show-minutes="false">
					</u-count-down>
				</view>
			</view>
		</view>
		<view class="tips" v-if="isCountdown">
			身体放松，将注意力集中在呼吸上感受气息流过鼻腔的感觉
		</view>
		<view class="" v-if="isShowStartBtn">
			<view class="start" v-if="!isStart">
				<view class="icon" @click="doStart">
					
				</view>
				<view class="txt">
					开始呼吸
				</view>
			</view>
			<view class="start end" @click="doEnd" v-else>
				<view class="icon">
					
				</view>
				<view class="txt">
					结束呼吸
				</view>
			</view>
		</view>
		<view class="time-box _df _jc _ac" v-if="isStart">
			
			<u-count-down
				ref="uCountDown2" 
				:timestamp="alltimestamp" 
				:show-days="false"
				:show-hours="false" 
				bg-color="none"
				color="#000"
				font-size="34"
				@end="countEnd2"
				@change="countChange2">
			</u-count-down>
		</view>
		<view class="btn-box" v-if="isShowBtn">
			<view class="btn-item" @click="showPop = true">
				<view class="icon">
					
				</view>
				<view class="txt">
					呼吸模式
				</view>
			</view>
			<view class="btn-item" @click="showPop2 = true">
				<view class="icon">
					
				</view>
				<view class="txt">
					呼吸时间
				</view>
			</view>
			<view class="btn-item btn-item3" @click="openZd">
				<view class="icon icon3">
					<view class="line" v-if="!isZd">
						
					</view>
				</view>
				<view class="txt">
					振动
				</view>
			</view>
		</view>
		<u-popup v-model="showPop" mode="bottom" border-radius="20">
			<view class="popCon">
				<view class="title-box">
					呼吸模式
				</view>
				<view class="item _df _ac _jb" @click="choose(index)" hover-class="hover" v-for="(item,index) in options1" :key="index">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">
						<view class="title">
							{{item.title}}
							<span class="ml20">{{item.num}}</span>
						</view>
						<view class="info">
							{{item.info}}
						</view>
					</view>
					<image class="gou" v-if="item.isChecked" src="@/static/img/index/gou.png" mode=""></image>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showPop2" mode="bottom" border-radius="20">
			<view class="popCon">
				<view class="title-box">
					呼吸时间
				</view>
				<view class="list">
					<view class="time-item _df _ac _jc" :class="{active:item.isActive}" @click="chooseTime(index)" hover-class="hover" v-for="(item,index) in options2" :key="index">
						{{item.time}}
					</view>
				</view>
			</view>
		</u-popup>
		<!-- <u-top-tips ref="uTips"></u-top-tips> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let timer,timer2
	export default {
		data() {
			return {
				topTitle:'呼吸训练',
				showPop:false,
				showPop2:false,
				options1:[
					{
						icon:require('@/static/img/index/hxImg2.png'),
						title:'平静呼吸',
						num:'4-4',
						one:4,
						two:0,
						three:4,
						info:'平复情绪，放松身体',
						isChecked:true,
						type:1
					},
					{
						icon:require('@/static/img/index/hxImg1.png'),
						title:'助眠呼吸',
						num:'4-7-8',
						one:4,
						two:7,
						three:8,
						time:12,
						info:'睡前呼吸法，天热镇定剂',
						isChecked:false,
						type:2,
					},
					{
						icon:require('@/static/img/index/hxImg3.png'),
						title:'唤醒身体',
						num:'6-2',
						one:6,
						two:0,
						three:2,
						info:'增加氧气，加速代谢',
						isChecked:false,
						type:3
					},
					{
						icon:require('@/static/img/index/hxImg4.png'),
						title:'缓解焦虑',
						num:'4-2-6',
						one:4,
						two:2,
						three:6,
						info:'降低心率和血压',
						isChecked:false,
						type:4
					},
					{
						icon:require('@/static/img/index/hxImg5.png'),
						title:'清理思绪',
						num:'4-7',
						one:4,
						two:0,
						three:6,
						info:'平心静气，内观自我',
						isChecked:false,
						type:5
					},
					{
						icon:require('@/static/img/index/hxImg6.png'),
						title:'缓解疼痛',
						num:'4-4-6',
						one:4,
						two:4,
						three:6,
						info:'增加血氧浓度，加快体内循环',
						isChecked:false,
						type:6
					}
				],
				options2:[
					
					{
						time:'1:00',
						isActive:true
					},
					{
						time:'2:00',
						isActive:false
					},
					{
						time:'2:30',
						isActive:false
					},
					{
						time:'3:00',
						isActive:false
					},
					{
						time:'5:00',
						isActive:false
					},
					
				],
				isZd:true,
				isStart:false,
				countDownNum:3,
				startClass:'',
				timeClass:'',
				countClass:'',
				isCountdown:false,
				isShowBtn:true,
				yuanText:'吸气',
				yuanCount:4,
				timestamp:4,
				alltimestamp:60,
				isPaused: false,
				isShowStartBtn: true,
				type:1,//呼吸类型
				nowCount:0.,
				modelData:{
					icon:require('@/static/img/index/hxImg2.png'),
					title:'平静呼吸',
					num:'4-4',
					one:4,
					two:0,
					three:4,
					info:'平复情绪，放松身体',
					isChecked:true,
					type:1,
					time:8
				},
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			saveTimeRecord(){
				let that = this
				uni.$_get({
					url: "saveTimeRecord|" +'?type='+ 3,
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							uni.showToast({
								title:'今日呼吸+1',
								duration:1500,
								icon:'none'
							})
							that.animationTime(1)
						}else{
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			back(){
				uni.navigateBack()
			},
			choose(e){
				this.options1.map((item,index) =>{
					if(e == index){
						item.isChecked = true
						this.type = item.type
						this.topTitle = item.title + item.num
						this.modelData = item
					}else{
						item.isChecked = false
					}
				})
				this.showPop = false
			},
			timeToSeconds(time) {
			  var timeArray = time.split(":");
			  var minutes = parseInt(timeArray[0]);
			  var seconds = parseInt(timeArray[1]);
			 
			  var totalSeconds = minutes * 60 + seconds;
			  return totalSeconds;
			},
			chooseTime(e){
				this.options2.map((item,index) =>{
					if(e == index){
						item.isActive = true
						this.alltimestamp = this.timeToSeconds(item.time)
					}else{
						item.isActive = false
					}
				})
				this.showPop2 = false
				// console.log(this.alltimestamp)
			},
			openZd(){
				this.isZd = !this.isZd
			},
			doStart(){
				this.countDownNum = 3
				this.startClass = 'dostart'
				this.topTitle = this.options1.find(item => item.isChecked).title + this.options1.find(item => item.isChecked).num
				this.isShowBtn = false
				this.timestamp = this.modelData.one
				
				this.isShowStartBtn = false
				setTimeout(()=>{
					this.isCountdown = true
					let timer1 = setInterval(()=>{
						this.countClass = 'countAnimation'
						this.countDownNum -= 1
						if(this.countDownNum == 0){
							clearInterval(timer1)
							this.isCountdown = false
							this.countClass = ''
							this.startClass = ''
							this.animationTime(this.modelData.type)
							// this.isStart = true
							this.isStart = true
							this.isShowStartBtn = true
						}
					},1000)
				},1000)
			},
			vibrate(){
				if(this.isZd){
					uni.vibrateLong({
						success: function () {
							console.log('success');
						}
					});
				}
			},
			animationTime(e){
				let timeClass = ''
				console.log(e)
				switch (e){
					case 1:
						this.timeClass = 'animation-duration1'
					break
					case 2:
						this.timeClass = 'animation-duration2'
					break 
					case 3:
						this.timeClass = 'animation-duration3'
					break
					case 4:
						this.timeClass = 'animation-duration4'
					break 
					case 5:
						this.timeClass = 'animation-duration5'
					break
					case 6:
						this.timeClass = 'animation-duration6'
					break
					case 7:
						this.timeClass = 'animation-duration7'
					break
					case 8:
						this.timeClass = 'animation-duration8'
					break
					case 9:
						this.timeClass = 'animation-duration9'
					break
					case 10:
						this.timeClass = 'animation-duration10'
					break
					case 11:
						this.timeClass = 'animation-duration11'
					break
					case 12:
						this.timeClass = 'animation-duration12'
					break
					case 13:
						this.timeClass = 'animation-duration13'
					break 
					case 14:
						this.timeClass = 'animation-duration14'
					break
					case 15:
						this.timeClass = 'animation-duration15'
					break 
					case 16:
						this.timeClass = 'animation-duration16'
					break
					case 17:
						this.timeClass = 'animation-duration17'
					break
					case 18:
						this.timeClass = 'animation-duration18'
					break
					case 19:
						this.timeClass = 'animation-duration19'
					break
					case 20:
						this.timeClass = 'animation-duration20'
					break
				}
				// return timeClass
			},
			countChange(e){
				if(this.modelData.two == 0){
					// this.startClass = 'model1'
					if(e==0){
						this.vibrate()
			
						if(this.yuanText == '吸气'){
							this.timestamp = this.modelData.three
							this.$refs.uCountDown.start()
							this.yuanText = '呼气'
						}else if(this.yuanText == '呼气'){
							this.timestamp = this.modelData.one
							this.yuanText = '吸气'
							// this.timestamp = 4
							this.$refs.uCountDown.start()
						}
						
					}
				}else{
					// this.yuanText = '吸气'
					
					if(e==0){
						
						this.vibrate()
						if(this.yuanText == '吸气'){
							this.startClass = 'paused-animation'
							this.timestamp = this.modelData.two
							// this.timestamp = 5
							this.yuanText = '屏气'
							this.$refs.uCountDown.start()
						}else if(this.yuanText == '屏气'){
							this.yuanText = '呼气'
							this.startClass = ''
							this.timestamp = this.modelData.three
							// this.timestamp = 4
							this.$refs.uCountDown.start()
						}else if(this.yuanText == '呼气'){
							this.yuanText = '吸气'
							// this.timestamp = 4
							this.timestamp = this.modelData.one
							this.$refs.uCountDown.start()
						}
			
					}
				}
				
			},
			countEnd(){
				
				
			},
			countChange2(e){
				// console.log(e,666)
				this.nowCount = e
				if(e==0){
					
				}
			},
			countEnd2(){
				this.isStart = false
				this.isShowBtn = true
				this.startClass = ''
				clearInterval(timer)
				this.saveTimeRecord()
			},
			
			doEnd(){
				let num = this.alltimestamp - this.nowCount 
				if(num<60){
					this.$refs.uToast.show({
						title: '本次呼吸时间不满1分钟,记录不会保存',
						type: 'warning',
						duration:2300
					})
				}else{
					this.saveTimeRecord()
				}
				this.isStart = false
				this.isShowBtn = true
				this.startClass = ''
				this.topTitle = '呼吸训练'
				this.yuanText = '吸气'
				clearInterval(timer)
			}
		},
	}
</script>

<style lang="scss" scoped>
.content{
	padding: 100rpx 30rpx 100rpx;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	background: linear-gradient(0deg,#d9cdff 0%, #fefeff 100%), #000000;
	.top{
		.img1{
			width: 30rpx;
			height: 30rpx;
		}
		.title{
			// width: 160rpx;
			padding: 0 25rpx;
			height: 50rpx;
			background: #000000;
			border-radius: 25rpx;
			font-size: 30rpx;
			color: #fff;
		}
		.img2{
			width: 38rpx;
			height: 38rpx;
		}
	}
	.yuan-box{
		width: 100%;
		height: 750rpx;
		position: relative;
		.yuan1{
			width: 310rpx;
			height: 310rpx;
			border-radius: 50%;
			background-color: #D8CBFF;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -155rpx 0 0 -155rpx;
			animation: circle-opacity 8s infinite linear;
			
		}
		.yuan2{
			width: 400rpx;
			height: 400rpx;
			opacity: 0.2;
			border: 25rpx solid #bba9f7;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -200rpx 0 0 -200rpx;
			animation: circle-opacity 8s infinite linear;
		}
		
		.yuan-text-box{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 3;
			.yuanText{
				font-size: 50rpx;
				padding-top: 40rpx;
				color: #000;
				font-family: $uni-font-family-Bold;
				margin-bottom: 10rpx;
			}
			.yuanCount{
				font-size: 30rpx;
				color: #000;
				font-family: $uni-font-family-Bold;
				text-align: center;
			}
		}
		.dostart{
			animation: circle-opacity2 2s ease-out;
			// opacity: 0;
		}
		.count-down{
			width: 180rpx;
			height: 180rpx;
			background: #d8cbff;
			text-align: center;
			line-height: 180rpx;
			border-radius: 50%;
			font-size: 100rpx;
			color: #333;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -90rpx 0 0 -90rpx;
			
		}
		.countAnimation{
			animation: circle-opacity3 1s infinite ease-out;
		}
		.scaleB{
			transform: scale(1.4);
			
		}
		.paused-animation {
		    animation-play-state: paused;
		}
		// 模式一
		.model1{
			animation: circle-scaleB 8s infinite linear;
		}.model2{
			animation: circle-scaleS 4s infinite;
		}
	}
	.tips{
		font-size: 28rpx;
		color: #6E6A78;
		line-height: 40rpx;
		text-align: center;
		padding: 0 100rpx;
		position: relative;
		margin-top: -150rpx;
		margin-bottom: 30rpx;
	}
	@keyframes circle-opacity{
	    0% {
	        transform: scale(1);
	    }
		50% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes anmation2{
	    0% {
	        transform: scale(1);
	    }
		33% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes anmation3{
	    0% {
	        transform: scale(1);
	    }
		75% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes anmation4{
	    0% {
	        transform: scale(1);
	    }
		40% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes anmation5{
	    0% {
	        transform: scale(1);
	    }
		40% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes anmation6{
	    0% {
	        transform: scale(1);
	    }
		40% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	    
	}
	@keyframes circle-scaleB{
	    0% {
	        transform: scale(1);
	    }
		50% {
			transform: scale(1.3);
		}
		100% {
			transform: scale(1);
		}
		
	    
	}
	@keyframes circle-scaleS{
	    0% {
	        transform: scale(0.8);
	    }
		50% {
			transform: scale(1);
		}
		100% {
			transform: scale(1.2);
		}
	    
	}
	@keyframes circle-opacity2{
	    0% {
	        transform: scale(1);
	    }
		50% {
			transform: scale(10);
			// opacity: 0.5;
		}
		100% {
			transform: scale(20);
			opacity: 0;
		}
	    
	}
	
	@keyframes circle-opacity3{
	    0% {
	        transform: scale(1);
	    }
		
		100% {
			transform: scale(1.2);
			opacity: 0;
		}
	    
	}
	.start{
		margin-bottom: 80rpx;
		.icon{
			width: 108rpx;
			height: 108rpx;
			background: rgba(51,51,51,1) url(@/static/img/index/hxIcon4.png) no-repeat center / 64rpx 64rpx;
			border-radius: 50%;
			transition: 0.3s ease;
			margin: 0 auto 20rpx;
		}
		.icon:hover{
			// background-color: rgba(51,51,51,0.8);
		}
		.iconActive{
			background-color: rgba(255,255,255,1);
			background-image: url(@/static/img/index/hxIcon4h.png);
		}
		.txt{
			font-size: 28rpx;
			color: #5A5568;
			text-align: center;
		}
	}
	.end{
		.icon{
			background-color: rgba(255,255,255,0.8);
			background-image: url(@/static/img/index/hxIcon4h.png);
		}
	}
	.time-box{
		height: 60rpx;
		width: 150rpx;
		border-radius: 30rpx;
		// padding: 0 30rpx;
		margin: 0 auto 0;
		background: rgba(255,255,255,0.8);
	}
	/deep/.u-countdown{
	    font-family: $uni-font-family-Heavy;
	}
	.btn-box{
		display: flex;
		.btn-item{
			flex: 1;
			text-align: center;
			.icon{
				width: 96rpx;
				height: 96rpx;
				background-color: rgba(255,255,255,0.5);
				background-position: center;
				background-repeat: no-repeat;
				transition: 0.3s ease;
				border-radius: 50%;
				margin: 0 auto 20rpx;
				position: relative;
				.line{
					width: 60rpx;
					height: 8rpx;
					background-color: #2c2c2c;
					border-bottom: 4rpx solid #fff;
					border-radius: 6rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -4rpx 0 0 -30rpx;
					transform: rotate(-140deg);
					z-index: 2;
				}
			}
			.icon:hover{
				background-color: rgba(51,51,51,0.15);
			}
			.icon3:hover{
				background-color: rgba(255,255,255,0.5);
			}
			.txt{
				font-size: 28rpx;
				color: #5A5568;
				text-align: center;
			}
		}
		
	}
	.btn-item:nth-child(1) .icon{
		background-image: url(@/static/img/index/hxIcn1.png);
		background-size: 47rpx 37rpx;
	}
	.btn-item:nth-child(2) .icon{
		background-image: url(@/static/img/index/hxIcn2.png);
		background-size: 43rpx 44rpx;
	}
	.btn-item:nth-child(3) .icon{
		background-image: url(@/static/img/index/hxIcn3.png);
		background-size: 40rpx 38rpx;
	}
}
.popCon{
	padding: 50rpx 20rpx;
	.title-box{
		font-size: 36rpx;
		color: #000;
		font-family: $uni-font-family-Bold;
		margin-bottom: 40rpx;
		text-align: center;
	}
	.item{
		padding: 30rpx 20rpx;
		
		border-radius: 20rpx;
		.icon{
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			margin-right: auto;
			.title{
				font-size: 30rpx;
				color: #000;
				font-family: $uni-font-family-Bold;
				margin-bottom: 10rpx;
			}
			.info{
				font-size: 24rpx;
				color: #aaa;
			}
		}
		.gou{
			width: 37rpx;
			height: 27rpx;
		}
	}
	.list{
		padding: 0 20rpx;
		.time-item{
			width: 100%;
			height: 96rpx;
			background: #ffffff;
			border: 1rpx solid #dddddd;
			border-radius: 49rpx;
			font-size: 30rpx;
			color: #000;
			margin-bottom: 30rpx;
		}
		.active{
			background: #7089DA;
			border-color: #7089DA;
			color: #fff;
		}
	}
}
.animation-duration1{
	animation-duration: 8s !important;
}
.animation-duration2{
	// animation-duration: 2s !important;
	animation-name: anmation2 !important;
	animation-duration: 12s !important;
}
.animation-duration3{
	animation-name: anmation3 !important;
	animation-duration: 8s !important;
}
.animation-duration4{
	animation-name: anmation4 !important;
	animation-duration: 10s !important;
	
}
.animation-duration5{
	animation-name: anmation5 !important;
	animation-duration: 10s !important;
}
.animation-duration6{
	animation-name: anmation6 !important;
	animation-duration: 10s !important;
}
.animation-duration7{
	animation-duration: 7s !important;
}
.animation-duration8{
	animation-duration: 8s !important;
}
.animation-duration9{
	animation-duration: 9s !important;
}
.animation-duration10{
	animation-duration: 10s !important;
}
.animation-duration11{
	animation-duration: 11s !important;
}
.animation-duration12{
	animation-duration: 12s !important;
}
.animation-duration13{
	animation-duration: 13s !important;
}
.animation-duration14{
	animation-duration: 14s !important;
}
.animation-duration15{
	animation-duration: 15s !important;
}
.animation-duration16{
	animation-duration: 16s !important;
}
.animation-duration17{
	animation-duration: 17s !important;
}
.animation-duration18{
	animation-duration: 18s !important;
}
.animation-duration19{
	animation-duration: 19s !important;
}
.animation-duration20{
	animation-duration: 20s !important;
}
</style>
